<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
 <button @click="setNum(10)">{{num}}</button>
  <hr/>
  <one :num="num" :set-num="setNum"></one>
  <hr/>
  <two :num="num" @suibian="setNum"></two>
  <hr/>
  <three :num="num" @zi-ding-yi="setNum(100)"></three>
</div>
</body>
<script>
  new Vue({
    el: "#root",
    data:{
      num:100
    },
    methods:{
      setNum(num){
        this.num+=num;
      }
    },
    components: {
      one: {
        props: ["num", "set-num"],
        template: `
          <button @click="setNum(1)">{{ num }}</button>`
      },
      two: {
        props: ["num"],
        methods: {
          fn() {
            //第一个参数是自定义事件的名称,第二个参数开始是传递的参数
            this.$emit("suibian", 2, 20, 30, 40)
          }
        },
        template: `
          <button @click="fn">{{ num }}</button>`
      },
      three: {
        props: ["num"],
        template:(`
				    <button @click="$emit('zi-ding-yi')">{{num}}</button>
				`)
      }
    }
  })
</script>
</html>